import React from 'react'
import { Swiper, SwiperSlide } from 'swiper/react'
import { Image } from 'antd'
// Import Swiper styles
import 'swiper/css'
import 'swiper/css/effect-coverflow'
import 'swiper/css/pagination'

// import required modules
import { EffectCoverflow, Pagination } from 'swiper/modules'
import './index.scss'

const ModalContent = ({ data }) => {
  return (
    <Swiper
      grabCursor={true}
      centeredSlides={true}
      slidesPerView={'auto'}
      initialSlide={0}
      pagination={true}
      modules={[EffectCoverflow, Pagination]}
    >
      {data &&
        data.map((i) => {
          return (
            <SwiperSlide>
              <div className="swiper_slide_box">
                <div className="swiper_slide_left">
                  <div>区：{i.county_name}</div>
                  <div>行业：{i.industry_type}</div>
                  <div>企业名称：{i.ent_name}</div>
                  <div>区域/位置：{i.area}</div>
                  <div>管控对象：--</div>
                  <div>监测对象：{i.monitoring_object}</div>
                  <div>设施编号：{i.code_in_ent}</div>
                  <div>安装位置：{i.installation_location}</div>
                  <div>安装方式：{i.installation_method}</div>
                  <div>点位属性：{i.point_attribute}</div>
                  <div>点位类型：{i.dev_type}</div>
                  <div>数据来源：{i.who_construct}</div>
                  <div>设备编号：{i.dev_code}</div>
                  <div>断路器（A）：{i.circuit_breaker}</div>
                  <div>安装设备型号：{i.equipment_model}</div>
                  <div>设备入网日期：{i.created_at}</div>
                </div>
                <div className="swiper_slide_right">
                  <div>安装对象照片</div>
                  <div>
                    {i.monitoring_object_img.length > 0 ? (
                      <Image.PreviewGroup items={i.monitoring_object_img}>
                        <Image width={200} src={i.monitoring_object_img[0]} />
                      </Image.PreviewGroup>
                    ) : (
                      '暂无图片'
                    )}
                  </div>
                  <div>安装位置照片</div>
                  <div>
                    {i.installation_location_img.length > 0 ? (
                      <Image.PreviewGroup items={i.installation_location_img}>
                        <Image
                          width={200}
                          src={i.installation_location_img[0]}
                        />
                      </Image.PreviewGroup>
                    ) : (
                      '暂无图片'
                    )}
                  </div>
                </div>
              </div>
            </SwiperSlide>
          )
        })}
    </Swiper>
  )
}

export default ModalContent
